<template>
  <div class="centerTwo">
    <div class="c-center">
      <div class="c-center-l">
        <div class="c-center-l-l">
          <div style="position: relative; margin-left: 1.3021vw">
            <img src="@/assets/newDashboard/数据总量.png" class="zlData" style="width: 5.7292vw; height: 10.1852vh" />
            <!-- <img
              src="@/assets/index/边框.png"
              alt=""
              style="
                position: absolute;
                right: -50%;
                top: -35%;
                width: 4.4667vw;
                height: 8.4074vh;
              "
            /> -->
          </div>
        </div>
        <div class="c-center-l-r" style="margin-left: 1.3021vw">
          <div class="c-c-l-r-top">
            <div class="r-top-text">数据总量</div>
            <div class="r-top-text-img">
              <!-- <img src="@/assets/index/箭头.png" alt="" /> -->
            </div>
          </div>
          <div class="c-c-l-r-foot">
            <div class="r-foot-l">
              {{ allStockpile }}
            </div>
            <div class="r-foot-r r-top-text">GB</div>
          </div>
        </div>
      </div>
      <div class="c-center-r">
        <div class="c-center-r-li" v-for="(item, index) in stockpileList" :key="index">
          <img :src="item.src" alt="" />
          <div class="c-center-r-li-box">
            <div class="r-li-box-top">
              {{ item.name }}
            </div>
            <div class="r-li-box-foot">
              <div class="r-foot-l">
                {{ item.value }}
                <!-- <countTo :startVal="0" ref="countTos" :endVal="item.value * 1" :duration="3000"> </countTo> -->
              </div>
              <div class="r-foot-r r-top-text">GB</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to' //终端输入npm install vue-count-to --legacy-peer-deps
import { getDashboard } from '@/api/index/index.js'
import { mapState } from 'vuex'

import Cookies from 'js-cookie'
export default {
  name: 'SdssJddsZhgjWebCenterTwo',
  components: {
    countTo,
  },
  data() {
    return {
      allStockpile: 14.0,
      time: null,
      stockpileList: [
        {
          name: '全量数据区',
          value: '',
          src: require('@/assets/newDashboard/全量数据区.png'),
        },
        {
          name: '核心数据区',
          value: '',
          src: require('@/assets/newDashboard/核心数据区.png'),
        },
        {
          name: '主题数据区',
          value: '',
          src: require('@/assets/newDashboard/主题数据区.png'),
        },
      ],
    }
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  mounted() {
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.getData()
      }
    }, 1000)
  },

  methods: {
    getData() {
      getDashboard().then((res) => {
        if (res.data.code == 0) {
          const result = res.data.data
          this.allStockpile = Number(result.sumSize).toFixed(3)
          this.stockpileList[0].value = Number(result.fullDoseSize).toFixed(3)
          this.stockpileList[1].value = Number(result.kernelSize).toFixed(3)
          this.stockpileList[2].value = Number(result.themeSize).toFixed(3)
          clearInterval(this.time)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.centerTwo {
  width: 100%;
  height: 17%;
  // background-color: blue;
  margin-bottom: 1.2vh;
}

.c-center {
  height: 100%;
  width: 100%;
  // background-color: #FFFFFF;
  // border-radius: calc(var(--num)*5px);
  // padding: 0 calc(var(--num)*50px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-radius: 0.2604vw;
  padding: 1.0417vw;
  box-sizing: border-box;
  box-shadow: 0px 0.2083vw 0.8333vw 13.0208vw rgba(2, 54, 68, 0.8) inset;
}

.c-center-l {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.c-center-l-l img {
  width: 4.1667vw;
  height: 4.1667vw;
}

.c-center-l-r {
  height: 100%;
  // padding-top: calc(var(--num)*10px);
  // box-sizing: border-box;
  margin-left: 0.5208vw;
  // border-right: 0.0521vw solid #3bf5ff;
  // padding-right: 0.5208vw;
}

.c-c-l-r-top {
  display: flex;
  align-items: center;
}

.r-top-text {
  font-size: 0.8333vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.r-top-text-img {
  margin-left: 0.4167vw;
}

.r-top-text-img img {
  width: 0.6771vw;
  height: 0.8333vh;
}

.c-c-l-r-foot {
  margin-top: 0.5208vw;
  display: flex;
  align-items: baseline;
}

.r-foot-l {
  font-size: 1.0417vw;
  color: #ffffff;
  font-weight: 600;
}

.r-foot-r {
  margin-left: 0.5208vw;
}

.c-center-r {
  display: flex;
  align-items: center;
  margin-left: 2.0833vw;
}

.c-center-r-li {
  position: relative;
  margin-left: 1.0417vw;
  // background-color: #325b67;
  // border-radius: 0.5vw;
}

.c-center-r-li img {
  width: 9.6875vw;
  height: 6.6667vh;
}

.c-center-r-li-box {
  position: absolute;
  left: 20%;
  top: 0;
  width: 100%;
  height: 100%;
  // padding-left: calc(var(--num)*12px);
  box-sizing: border-box;
}

.r-li-box-top {
  margin-top: 0.7813vw;
  text-align: center;
  color: #ffffff;
  font-size: 0.7292vw;
}

.r-li-box-foot {
  // margin-top: calc(var(--num)*10px);
  margin: 0.05vw auto 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  text-align: center;
}

.zlData {
  margin-top: 1.0417vw;
}
</style>
